<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-2">
        <!--         
        .stop
        .prevent
        .capture
        .self
        .once 
        -->

        <!-- 阻止单击事件冒泡 -->
        <a @click.stop="doThis">doThis</a>
        <!-- 提交事件不再重载页面 -->
        <form @submit.prevent="onSubmit">
            <input type="submit" value="submit" />
        </form>
        <!-- 修饰符可以串联  -->
        <a @click.stop.prevent="doThat">doThat</a>
        <!-- 只有修饰符 -->
        <form @submit.prevent>
            <input type="submit" value="submit" />
        </form>
        <!-- 添加事件侦听器时使用事件捕获模式 -->
        <div @click.capture="doThis">doThis</div>
        <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
        <div @click.self="doThat">doThat<span>Sub Element</span></div>
        <!-- 点击事件将只会触发一次 -->
        <a @click.once="doThis">doThisOnce</a>
    </div>
    <script>
        var app2 = new Vue({
            el: '#app-2',
            data: {
                counter: 0,
                name: 'Chen'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                doThis: function () {
                    alert('do this method...');
                },
                doThat: function () {
                    alert('do that method...');
                },
                onSubmit: function () {
                    alert('onSubmit method...');
                }
            }
        });
    </script>
</body>


</html>